<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery实现的全选、反选和不选功能</title>
    <style>
        * { 
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
    </style>
</head>

<body>
    <ul>
        <li>
            <input id="input1" type="checkbox" value="1">
            <label for="input1">1.时间都去哪儿了</label>
        </li>
        <li>
            <input id="input2" type="checkbox" value="2">
            <label for="input2">2.海阔天空</label>
        </li>
        <li>
            <input id="input3" type="checkbox" value="3">
            <label for="input3">3.真的爱你</label>
        </li>
        <li>
            <input id="input4" type="checkbox" value="4">
            <label for="input4">4.不再犹豫</label>
        </li>
        <li>
            <input id="input5" type="checkbox" value="5">
            <label for="input5">5.光辉岁月</label>
        </li>
        <li>
            <input id="input6" type="checkbox" value="6">
            <label for="input6">6.喜欢妳</label>
        </li>
    </ul>

    <input id="all" type="checkbox">
    <input id="selectAll" type="button" value="全选">
    <input id="unSelectAll" type="button" value="全不选">
    <input id="reverseSelect" type="button" value="反选">
    <input id="getSelectValue" type="button" value="获得选中的所有值">

    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script>

        $('#selectAll').on('click', selectAll.bind(this, true))
        $('#unSelectAll').on('click', selectAll.bind(this, false))
        $('#reverseSelect').on('click', reverseSelect)
        $('#getSelectValue').on('click', getSelectValue)

        var $inputList = $('ul input');

        function selectAll(bool) {
            $inputList.prop('checked', bool);
        }

        function reverseSelect() {
            $inputList.each(function () {
                var $self = $(this)
                $self.prop('checked', !$self.prop('checked'))
            })
        }
        function getSelectValue() {
            var values = [];
            $('ul input:checked').each(function () {
                values.push($(this).val());
            })
            alert(values);
            console.log(values);
        }

        
    </script>
</body>

</html>